<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 导航栏 -->
        <div slot="header" class="clearfix">
          <el-button
            v-if="assignPerm('add-but')"
            size="small"
            type="primary"
            @click="addFn"
          >添加分类</el-button>
          <!-- 搜索框 -->
          <el-input
            v-model="title_contains"
            style="float: right; padding: 3px 0; width: 500px"
            placeholder="请输入内容"
            @keyup.enter.native="searchList"
            @input="closeFun"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchList"
            />
          </el-input>
        </div>
        <!-- 列表功能 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="image" label="图片">
            <template
              slot-scope="scope"
            ><img
              style="height: 80px"
              :src="scope.row.image"
            ></template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column prop="address" label="操作">
            <template slot-scope="{ row }">
              <!-- 作用域插槽 -->
              <el-button
                v-if="assignPerm('edit-but')"
                size="mini"
                type="primary"
                @click="handleEdit(row.id)"
              >编辑</el-button>
              <el-button
                v-if="assignPerm('dele-but')"
                size="mini"
                type="danger"
                @click="getdelete(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <!-- 分页 -->
          <el-pagination
            small
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 40]"
            :current-page="start"
            :total="total"
            :page-size="limit"
            @size-change="handleSizeChange"
            @current-change="changePage"
          />
        </el-row>
        <!-- 添加分类 -->
        <el-dialog
          :title="ruleForm.id ? '编辑分类' : '新增分类'"
          :visible.sync="dialogVisible"
          width="30%"
          center
          @close="closeFn"
        >
          <el-form
            ref="ruleForm"
            :rules="rules"
            :model="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 广告图片 -->
            <el-form-item label="广告图片" prop="image">
              <lmageUpload ref="lmageUpload" />
            </el-form-item>
            <!-- 标题 -->
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" />
            </el-form-item>
            <!-- 介绍 -->
            <el-form-item label="介绍" prop="desc">
              <el-input v-model="ruleForm.desc" />
            </el-form-item> </el-form><span slot="footer" class="dialog-footer">
            <el-button @click="closeFn">取 消</el-button>
            <el-button type="primary" @click="confirmFn">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  getcategories,
  addcategory,
  deletecategory,
  getcategory,
  updatacategory,
  getcount
} from '@/api/category'
export default {
  data() {
    return {
      title_contains: '',
      limit: 10, // 数据每页显示条数
      start: 1, // 默认显示第几页
      tableData: [],
      total: 0,
      rules: {
        // 效验规则
        title: [
          { required: true, message: '标题名称不能为空', trigger: 'blur' }
        ],
        desc: [{ required: true, message: '介绍不能为空', trigger: 'blur' }]
      },
      ruleForm: {
        title: '',
        desc: '',
        image: ''
      },
      dialogVisible: false
    }
  },
  // 初始化列表
  created() {
    this.getcategories()
    this.allUser()
  },
  methods: {
    closeFun() {
      if (!this.title_contains) {
        this.getcategories()
        this.allUser()
      }
    },
    // 获取分类列表
    async getcategories() {
      const res = await getcategories({
        _limit: this.limit,
        //   _start: this.start,
        //   title_contains: this.title_contains
        // })
        // this.tableData = res

        _start: (this.start - 1) * this.limit,
        title_contains: this.title_contains
      })
      this.tableData = res
    },
    // 获取指定经纪数量
    async allUser() {
      this.total = await getcount()
    },
    // 每页显示多少条数据
    handleSizeChange(value) {
      this.limit = value
      this.getcategories()
    },
    // 第几页数据
    changePage(newPage) {
      this.start = newPage // 将当前页码赋值给当前的最新页码
      this.getcategories() // 更新一下渲染页面
    },
    // 关闭弹窗
    closeFn() {
      this.ruleForm = {
        title: '',
        desc: '',
        image: '',
        id: ''
      }
      // 移除校验
      this.$refs.ruleForm.resetFields()
      this.$refs.lmageUpload.fileList = []
      this.dialogVisible = false
    },
    // 添加分类弹窗
    addFn() {
      this.dialogVisible = true
    },
    // 点击编辑弹窗
    async handleEdit(id) {
      this.dialogVisible = true
      if (id) {
        //  console.log(id, 123)
        this.ruleForm = await getcategory(id)
        this.$refs.lmageUpload.fileList.push({
          url: this.ruleForm.image
        })
      }
    },
    // 确认框
    async confirmFn() {
      this.$refs.ruleForm.validate()
      // 只有校验通过的情况下 才会执行await的下方内容
      // 新增业务
      if (this.ruleForm.id) {
        await updatacategory(this.ruleForm)
        this.$message.success('编辑成功!')
      } else {
        this.ruleForm.image = this.$refs.lmageUpload.fileList[0].url
        this.ruleForm = await addcategory({ ...this.ruleForm }) // 调用接口添加业务
        this.$message.success('添加成功')
      }
      // 重新拉取数据
      this.getcategories()
      this.allUser()
      this.closeFn() // 关闭弹层  =>  触发el-dialog的事件close事件
    },
    // 搜索关键字
    async searchList() {
      console.log(this.title_contains)
      this.tableData = await getcategories({
        _limit: this.limit,
        _start: this.start,
        title_contains: this.title_contains
      })
      this.total = this.tableData.length
    },
    // 删除
    async getdelete(id) {
      this.$confirm('确定要删除吗', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 调用接口
          await deletecategory(id)
          // 提示
          this.$message.success('删除成功!')
          // 更新数据
          if (this.total - (this.start - 1) * this.limit === 1) {
            this.start--
          }
          this.getcategories()
          this.allUser()
          this.closeFn()
        })
        .catch((error) => {
          // this.$message.info('取消删除')
          console.log(error)
        })
    }
  }
}
</script>

<style>
</style>
